<template>
  <div>
    <div class="topBoxEmpty"></div>
    <div class="topBox">
        <four-steps :step="3" ref="changeStep"></four-steps>
    </div>
    <div class="secBox" v-for="(item,index) in siteData" :key="index">
        <div class="top">
            <img class="leftImg" :src="item.cover+'!hmm'" alt="">
            <div class="rightBox">
                <span class="kmTxt">1km</span>
                <span class="txt1">{{index}}</span>
                <span class="txt2">刘亚林设计团队</span>
                <div class="msg1">
                    <img src="@/assets/images/icon1.jpg" alt="">
                    <span>营业时间：9:00 - 12:00</span>
                </div>
                <div class="msg1">
                    <img src="@/assets/images/icon2.jpg" alt="">
                    <span>地址：{{item.address}}</span>
                </div>
            </div>
        </div>
        <div class="bottom">
            <a class="left" :href="'tel:'+item.tel">
                <img src="@/assets/images/icon3.jpg" alt="">
                <span>{{item.tel}}</span>
            </a>
            <div class="right">预约到店</div> 
        </div>
    </div>
    <!-- 底部 -->
    <empty-tabbar></empty-tabbar>
    <tabbar></tabbar>
  </div>
</template>

<script>
import FourSteps from "./components/FourSteps"
import Tabbar from '@/pages/home/components/Tabbar'
import emptyTabbar from '@/pages/home/components/emptyTabbar'
export default {
  name: 'fourStep',
  components: {
      FourSteps,emptyTabbar,Tabbar
  },
  data() {
    return {
        siteData:null
    };
  },
  methods: {
    //获取门店信息   
      getSite(para){
        this.$store.commit('getParam');
        var param = this.$store.state.param;
        param.designer_id_list = para
        this.$jsonp(    
            this.$store.state.categoryUrl + "/photo/getCompanyInfoByDesignerId",
            param
        ).then(res => {
            console.log(res[2])
            this.$set(this, "siteData", res[2]);
            
        });
      }
  },
  created() {
    this.$nextTick(() => {
      this.$refs.changeStep.changeStep(4);
      var stylistIdArr = this.$route.params.stylistIdArr;//设计师ID
      this.getSite(stylistIdArr);//获取门店信息   
    })
  },
}
</script>

<style lang="stylus" scoped>
.topBoxEmpty
    height 233px
.topBox
    position fixed
    left 0
    top 0
    width 100%
    z-index 66
    height 233px
    // box-shadow 0 0 10px 2px #f4f4f4
    box-sizing border-box
    padding-top 62px
    display flex
    flex-direction column
    align-items center
    margin-bottom 15px
    background url(../../assets/images/bg3.jpg)
    background-size 100% 100%
.secBox
    width 700px
    display flex
    flex-direction column
    align-items center
    border-radius 10px
    box-shadow 0 0 10px 2px #f4f4f4
    color #333333
    margin 10px auto
    overflow hidden
    margin-bottom 10px
    .top
        width 100%
        height 202px
        box-sizing border-box
        padding-left 30px
        display flex
        margin 15px 0
        align-items center
        .leftImg
            width 250px
            height 202px
            margin-right 22px
            object-fit: cover;
        .rightBox
            flex 1
            height 202px
            display flex
            flex-direction column
            justify-content center
            position relative
            .txt1
                line-height 26px
                font-size 26px
                font-weight bold
                margin-bottom 14px
                letter-spacing 1px
            .txt2
                line-height 22px
                font-size 22px
                letter-spacing 1px
                color #666666
                margin-bottom 25px
            .msg1
                height 32px
                line-height 32px
                font-size 22px
                color #666666
                display flex
                align-items center
                margin-top 5px
                img 
                    width 26px
                    height auto
                    margin-right 12px
                span 
                    max-width 350px
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
            .kmTxt
                position absolute
                right 20px
                top 20px
                display inline-block
                font-size 22px
                color #666666
    .bottom
        width 100%
        height 80px
        line-height 80px
        display flex
        a
            color #666666
        .left
            width 50%
            height 80px
            display flex
            align-items center
            justify-content center
            background #eeeeee
            font-size 28px
            img 
                width 30px
                height 30px
                margin-right 10px
        .right
            width 50%
            height 80px
            line-height 80px
            text-align center
            background #ce0021
            color #ffffff
    

</style>